<template>
    <div class="margin-container-list">

        <div class="top-operate">

          <el-input v-model="searchKeyword" @keyup.enter.native="handleSearch"  placeholder="请输入搜索关键字" style="width: 300px"></el-input>

          <el-date-picker
            v-model="datePicker"
            type="daterange"
            unlink-panels
            range-separator="至"
            value-format="yyyy-MM-dd HH:mm:ss"
            start-placeholder="任务开始时间"
            end-placeholder="任务结束时间">
          </el-date-picker>
          <el-button type="primary" @click="handleSearch">查询</el-button>

        </div>

        <!-- 内容列表 -->
        <div class="table-container">
            <el-table :data="recruiterList" @selection-change="handleSelectionChange" v-loading="listLoading"
                      element-loading-text="加载中" style="width: 100%">
                <el-table-column width="55px" type="selection" align="center"></el-table-column>

                <el-table-column width="50" label="排名" type="index" :index="indexMethod"> </el-table-column>


                <el-table-column width="80px" label="招募员" prop="realname" align="center">
                    <template slot-scope="scope">
                        <div @click="updateRecruiter(scope.row)">
                            <a><span style="color: #2d8cf0">{{scope.row.nickname}}</span></a>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column width="150px" label="性别" prop="gender" align="center">
                    <template slot-scope="scope">
                        {{ dict.gender[scope.row.gender]}}
                    </template>
                </el-table-column>

                <el-table-column width="150px" label="手机号" prop="phone" align="center"/>
                <el-table-column min-width="150px" label="微客数" align="center" prop="memberCount">
                  <template slot-scope="scope">
                    <div>
                      {{scope.row.memberCount}}人
                    </div>
                  </template>
                </el-table-column>

                <el-table-column min-width="150" label="订单数" align="center" prop="orderNum">
                  <template slot-scope="scope">
                    <div>
                      {{scope.row.orderNum}}笔
                    </div>
                  </template>
                </el-table-column>
                <el-table-column min-width="150" label="分销金额" align="center" prop="orderPrice"></el-table-column>
                <el-table-column min-width="150" label="分销比例" align="center" prop="sellGoodsPercent"></el-table-column>
                <el-table-column min-width="150" label="需付金额" align="center" prop="payPrice"></el-table-column>
            </el-table>
        </div>

        <!-- 列表分页 -->
        <div class="pagination">
            <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
                           :current-page="recruiterListQuery.currentPage"
                           :page-sizes="[10, 20, 50, 100]" :page-size="recruiterListQuery.size"
                           layout="total, sizes, prev, pager, next, jumper"
                           :total="total">
            </el-pagination>
        </div>

    </div>

</template>

<script>
  import { pagingRecruiterSell } from '@/api/goods/goods-statistics'

  export default {
    data() {
      return {
        recruiterList: [],
        total: null,
        listLoading: true,
        multipleSelection: [],
        showDelResetBtn: false,
        recruiterListQuery: {
          enterpriseId: this.getEnterpriseId(),
          currentPage: 1,
          size: 10,
          keyword: '',
          startDate: '',
          endDate: ''
        },
        recruiter: {
          recruiterId: '',
          enterpriseId: this.getEnterpriseId(),
          username: '',
          password: '',
          realname: '',
          gender: '1',
          phone: '',
          remark: '',
          commissionPercent: '',
          statusFlag: '1'
        },
        searchStatusFlag: '',
        searchKeyword: '',
        searchGender: '',
        dialogFormVisible: false,
        dialogStatus: '',
        isHaveDict: false,
        recruiterCount: 0,
        memberCount: 0,
        dict: {},
        rules: {
        },
        Map: {},
        datePicker: []
      }
    },
    // 初始化页面
    created() {
      this.initRecruiterList()
    },
    methods: {
      close() {
        this.dialogFormVisible = false
      },
      handleDialogClose() {
        this.dialogFormVisible = false
      },
      initRecruiterList() {
        const that = this
        that.listLoading = true
        pagingRecruiterSell(this.recruiterListQuery).then(response => {
          const recruiterList = response.data.records
          that.recruiterList = recruiterList
          that.total = response.total
          that.listLoading = false
          if (!that.isHaveDict) {
            that.dict = response.data.dict
            that.isHaveDict = true
          }
        })
      },
      indexMethod(index) {
        const page = this.recruiterListQuery.page
        return 10 * (page - 1) + (index + 1)
      },
      // 更改当前页面大小
      handleSizeChange(val) {
        this.recruiterListQuery.size = val
        this.initRecruiterList()
      },
      // 更改当前页数
      handleCurrentChange(val) {
        this.recruiterListQuery.currentPage = val
        this.initRecruiterList()
      },
      // 勾选
      handleSelectionChange(val) {
        this.multipleSelection = val
      },
      // 查询
      handleSearch() {
        if (this.searchKeyword) {
          this.recruiterListQuery.keyword = this.searchKeyword
        }
        if (this.datePicker.length > 0) {
          this.recruiterListQuery.startDate = this.datePicker[0]
          this.recruiterListQuery.endDate = this.datePicker[1]
        }
        this.recruiterListQuery.currentPage = 1
        this.initRecruiterList()
      },
      goRecruiterMember(row) {
        const recruiterId = row.recruiterId
        this.$router.push({ path: '/user/member/index', query: { recruiterId: recruiterId }})
      },
      statusFlagType(row) {
        const statusFlag = row.statusFlag
        if (statusFlag === 0) {
          return 'primary'
        } else {
          return 'danger'
        }
      }
    }
  }

</script>
